import React, { PureComponent } from 'react';
import { Text, View, Image, ImageBackground, TouchableOpacity, FlatList, Alert, TouchableHighlight } from 'react-native';
import TopBar from "../../../../../components/topbar";
import { StackActions } from "react-navigation";
import styles from "./style"
import MineCellView from "../mineCell/mineCell"
import modifyImage from "../../../../../assets/images/mine_01.png"
import codeImage from "../../../../../assets/images/mine_02.png"
import backImage from "../../../../../assets/images/mine_03.png"
import moneyImage from "../../../../../assets/images/mine_04.png"

import image5 from "../../../../../assets/images/mine_05.png"
import image6 from "../../../../../assets/images/mine_06.png"
import image7 from "../../../../../assets/images/mine_07.png"
import image8 from "../../../../../assets/images/mine_08.png"
import image9 from "../../../../../assets/images/mine_09.png"
import image10 from "../../../../../assets/images/mine_10.png"
import image11 from "../../../../../assets/images/mine_11.png"

import indicator from "../../../../../assets/images/mine_indicator.png"

export default class MyView extends PureComponent {
  handleBackPress() {
    this.props.navigation.dispatch(StackActions.pop({
      n: 1,
    }));
  }


  pushToModifyInfo() {
    this.props.navigation.dispatch(
      StackActions.push({
        routeName: "AccountSet"
      })
    );
  }

  clickSignBtn() {

  }

  clickCodeBtn() {//点击二维码按钮

  }

  clickMineCell(index) {
    //Alert.alert('你点击了按钮 index = ' + index);
    if (index == 0) {//金豆中心
      this.props.navigation.dispatch(
        StackActions.push({
          routeName: "JinDou"
        })
      );
    } else if (index == 1) {//填写邀请码

    } else if (index == 2) {//收支明细
      this.props.navigation.dispatch(
        StackActions.push({
          routeName: "Income"
        })
      );
    } else if (index == 3) {//消息中心
      this.props.navigation.dispatch(
        StackActions.push({
          routeName: "MessageCenter"
        })
      );
    } else if (index == 4) {//帮助中心
      this.props.navigation.dispatch(
        StackActions.push({
          routeName: "HelpCenter"
        })
      );
    } else if (index == 5) {//切换账号

    } else if (index == 6) {//关于
      this.props.navigation.dispatch(
        StackActions.push({
          routeName: "About"
        })
      );
    }

  }

  _keyExtractor = (item, index) => item.id

  render() {

    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        <TopBar navigation={this.props.navigation} title="个人中心" _rightOnPress={this.handleBackPress.bind(this)}
          leftIsVisible={true}></TopBar>
        <View style={{ flexDirection: 'row', paddingTop: 15 }}>
          <Image source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }} style={{ width: 50, height: 50, borderRadius: 25, marginLeft: 25 }} />

          <View style={{ width: 80, height: 40, justifyContent: 'space-between', alignSelf: "center" }}>
            <Text style={[styles.fontStyle, { marginLeft: 10 }]}> 我是昵称</Text>
            <Text style={[styles.fontStyle, { marginLeft: 10 }]}> ID 123456</Text>
          </View>


          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: "center" }}>

            <TouchableOpacity onPress={this.pushToModifyInfo.bind(this)} style={[styles.buttonStyle,
            { height: 35, width: 35, marginRight: 15 }]}>
              <Image source={modifyImage} style={{ width: 35, height: 35 }} />
            </TouchableOpacity>

            <TouchableOpacity onPress={this.clickSignBtn.bind(this)} style={[styles.buttonStyle,
            { height: 35, width: 35, marginRight: 15 }]}>
              <Image
                source={codeImage}
                style={{ width: 35, height: 35 }}></Image>
            </TouchableOpacity>
          </View>
        </View>

        <ImageBackground source={backImage} style={{
          height: 130, marginTop: 15, borderRadius: 10,
          flexDirection: 'row'
        }}>
          <Image source={moneyImage} style={{ width: 35, height: 35, marginLeft: 25, alignSelf: 'center' }} />
          <View style={{ marginLeft: 10, height: 60, width: 150, alignSelf: 'center', justifyContent: "space-between" }}>
            <Text style={{ fontSize: 12, color: 'white' }}>余额 (元)</Text>
            <Text style={{ fontSize: 30, color: 'white' }}>200.00</Text>
          </View>
          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
            <TouchableHighlight onPress={() => this.clickSignBtn()} style={{
              width: 80, height: 20,
              alignSelf: 'flex-end', marginRight: 30,
              marginBottom: 25, backgroundColor: 'orange',
              borderRadius: 15, borderWidth: 0.5,
              borderColor: 'white', justifyContent: 'center',
              alignItems: 'center'
            }} underlayColor='orange'>
              <Text style={{ height: 12, fontSize: 12, color: 'black' }}>
                立即提现
                            </Text>
            </TouchableHighlight>

          </View>
          {/* <View style={{position:'absolute',right:15,
                            borderColor:'#27F15D',
                            width:80,
                            height:30,
                            alignItems: "center",
                            alignSelf:'flex-end',
                            justifyContent: "center",
                            backgroundColor: '#fff',
                            borderWidth:1,}}>
                            <TouchableOpacity onPress={this.clickSignBtn.bind(this)}>
                                <Text style={{fontWeight:'bold',color:'black'}}>立即提现</Text>
                            </TouchableOpacity>
                    </View> */}
        </ImageBackground>

        <View style={{
          flex: 1, marginTop: 20, marginLeft: 15, marginRight: 15,
          marginBottom: 40, color: 'black', shadowOffset: { width: 0, height: 0 },
          shadowOpacity: 0.2, shadowRadius: 10, backgroundColor: '#F4F4F4', borderRadius: 8,
        }}>
          <FlatList
            data={[
              { id: "1", title: '金豆中心', content: '2000', imageName: image5 },
              { id: "2", title: '填写邀请码', content: '+1.0元', imageName: image6 },
              { id: "3", title: '收支明细', content: '10', imageName: image7 },
              { id: "4", title: '消息中心', content: '', imageName: image8 },
              { id: "5", title: '帮助中心', content: '', imageName: image9 },
              { id: "6", title: '切换账号', content: 'V1.2.1', imageName: image10 },
              { id: "7", title: '关于', content: 'V1.2.1', imageName: image11 },
            ]}
            keyExtractor={this._keyExtractor}
            renderItem={({ item, index }) => <TouchableOpacity onPress={this.clickMineCell.bind(this, index)}>
              <MineCellView imageName={item.imageName} indicator={indicator} title={item.title} content={item.content}></MineCellView>
            </TouchableOpacity>


            }
          />
        </View>
      </View>

    );
  }
}